{% extends "base.html" %}

{% set current_menu = 'lead' %}
{% set current_page = 'lead_pool_detail' %}

{% block title %}线索管理 - 线索池详情{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-6">
    <!-- 面包屑导航 -->
    <nav class="flex mb-6" aria-label="Breadcrumb">
        <ol class="inline-flex items-center space-x-1 md:space-x-3">
            <li class="inline-flex items-center">
                <a href="{{ url_for('main.home') }}" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-primary">
                    <i class="fas fa-home mr-2"></i>
                    首页
                </a>
            </li>
            <li>
                <div class="flex items-center">
                    <i class="fas fa-chevron-right text-gray-400 mx-2"></i>
                    <a href="{{ url_for('lead.lead_list') }}" class="text-sm font-medium text-gray-700 hover:text-primary">线索管理</a>
                </div>
            </li>
            <li>
                <div class="flex items-center">
                    <i class="fas fa-chevron-right text-gray-400 mx-2"></i>
                    <a href="{{ url_for('lead.lead_pool') }}" class="text-sm font-medium text-gray-700 hover:text-primary">线索池</a>
                </div>
            </li>
            <li>
                <div class="flex items-center">
                    <i class="fas fa-chevron-right text-gray-400 mx-2"></i>
                    <span class="text-sm font-medium text-gray-500">线索详情</span>
                </div>
            </li>
        </ol>
    </nav>

    <!-- 页面标题和操作按钮 -->
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold text-gray-900">线索池详情</h1>
        <div class="flex space-x-2">
            <a href="{{ url_for('lead.lead_edit', lead_id=lead.id) }}" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                <i class="fas fa-edit mr-2"></i>
                编辑
            </a>
            <a href="{{ url_for('lead.lead_pool') }}" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                <i class="fas fa-arrow-left mr-2"></i>
                返回线索池
            </a>
            <button class="assign-lead inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700" data-id="{{ lead.id }}" data-name="{{ lead.name }}">
                <i class="fas fa-user-plus mr-2"></i>
                分配线索
            </button>
        </div>
    </div>

    <!-- 线索基本信息 -->
    <div class="bg-white rounded-lg shadow mb-6">
        <div class="px-6 py-4 border-b border-gray-200">
            <h3 class="text-lg font-medium text-gray-900">基本信息</h3>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <h4 class="text-sm font-medium text-gray-500">线索名称</h4>
                    <p class="mt-1 text-sm text-gray-900">{{ lead.name }}</p>
                </div>
                <div>
                    <h4 class="text-sm font-medium text-gray-500">线索编号</h4>
                    <p class="mt-1 text-sm text-gray-900">LEAD-{{ lead.id }}</p>
                </div>
                <div>
                    <h4 class="text-sm font-medium text-gray-500">公司名称</h4>
                    <p class="mt-1 text-sm text-gray-900">{{ lead.company or '无' }}</p>
                </div>
                <div>
                    <h4 class="text-sm font-medium text-gray-500">线索来源</h4>
                    <p class="mt-1 text-sm text-gray-900">{{ lead.source or '未知' }}</p>
                </div>
                <div>
                    <h4 class="text-sm font-medium text-gray-500">优先级</h4>
                    <p class="mt-1">
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                            {% if lead.priority == '高' %}bg-red-100 text-red-800
                            {% elif lead.priority == '中' %}bg-yellow-100 text-yellow-800
                            {% else %}bg-green-100 text-green-800{% endif %}">
                            {{ lead.priority }}
                        </span>
                    </p>
                </div>
                <div>
                    <h4 class="text-sm font-medium text-gray-500">线索评分</h4>
                    <p class="mt-1">
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                            {% if lead.score >= 70 %}bg-purple-100 text-purple-800
                            {% elif lead.score >= 40 %}bg-blue-100 text-blue-800
                            {% else %}bg-gray-100 text-gray-800{% endif %}">
                            {{ lead.score or '0' }}
                        </span>
                    </p>
                </div>
                <div>
                    <h4 class="text-sm font-medium text-gray-500">创建时间</h4>
                    <p class="mt-1 text-sm text-gray-900">{{ lead.created_at | format_time }}</p>
                </div>
                <div>
                    <h4 class="text-sm font-medium text-gray-500">在池中天数</h4>
                    <p class="mt-1 text-sm text-gray-900">{{ days_in_pool or '0' }} 天</p>
                </div>
                <div>
                    <h4 class="text-sm font-medium text-gray-500">预算</h4>
                    <p class="mt-1 text-sm text-gray-900">{{ lead.budget or '未填写' }}</p>
                </div>
                <div>
                    <h4 class="text-sm font-medium text-gray-500">创建人</h4>
                    <p class="mt-1 text-sm text-gray-900">{{ lead.creator.name if lead.creator else '无' }}</p>
                </div>
            </div>
            
            <div class="mt-6">
                <h4 class="text-sm font-medium text-gray-500">备注</h4>
                <p class="mt-1 text-sm text-gray-900 whitespace-pre-line">{{ lead.remarks or '无' }}</p>
            </div>
        </div>
    </div>

    <!-- 联系信息 -->
    <div class="bg-white rounded-lg shadow mb-6">
        <div class="px-6 py-4 border-b border-gray-200">
            <h3 class="text-lg font-medium text-gray-900">联系信息</h3>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <h4 class="text-sm font-medium text-gray-500">联系人</h4>
                    <p class="mt-1 text-sm text-gray-900">{{ lead.name or '无' }}</p>
                </div>
                <div>
                    <h4 class="text-sm font-medium text-gray-500">职位</h4>
                    <p class="mt-1 text-sm text-gray-900">{{ lead.position or '无' }}</p>
                </div>
                <div>
                    <h4 class="text-sm font-medium text-gray-500">电话</h4>
                    <p class="mt-1 text-sm text-gray-900">{{ lead.phone or '无' }}</p>
                </div>
                <div>
                    <h4 class="text-sm font-medium text-gray-500">邮箱</h4>
                    <p class="mt-1 text-sm text-gray-900">{{ lead.email or '无' }}</p>
                </div>
                <div>
                    <h4 class="text-sm font-medium text-gray-500">行业</h4>
                    <p class="mt-1 text-sm text-gray-900">{{ lead.industry or '无' }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 操作日志 -->
    <div class="bg-white rounded-lg shadow mb-6">
        <div class="px-6 py-4 border-b border-gray-200">
            <h3 class="text-lg font-medium text-gray-900">操作日志</h3>
        </div>
        <div class="p-6">
            {% if logs %}
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                操作类型
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                操作内容
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                操作人
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                操作时间
                            </th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        {% for log in logs %}
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                                    {% if log.operation_type == '创建' %}bg-green-100 text-green-800
                                    {% elif log.operation_type == '分配' %}bg-blue-100 text-blue-800
                                    {% elif log.operation_type == '更新' %}bg-yellow-100 text-yellow-800
                                    {% elif log.operation_type == '删除' %}bg-red-100 text-red-800
                                    {% else %}bg-gray-100 text-gray-800{% endif %}">
                                    {{ log.operation_type }}
                                </span>
                            </td>
                            <td class="px-6 py-4 text-sm text-gray-500">
                                {{ log.operation_content }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{ log.operator.name if log.operator else '系统' }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{ log.created_at | format_time }}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <p class="text-sm text-gray-500 text-center py-4">暂无操作日志</p>
            {% endif %}
        </div>
    </div>
</div>

<!-- 分配线索模态框 -->
<div id="assign-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
        <div class="mt-3 text-center">
            <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-blue-100">
                <i class="fas fa-user-plus text-blue-600"></i>
            </div>
            <h3 class="text-lg leading-6 font-medium text-gray-900 mt-4">分配线索</h3>
            <div class="mt-2 px-7 py-3">
                <p class="text-sm text-gray-500">
                    将线索 "<span id="assign-lead-name"></span>" 分配给销售人员
                </p>
                <div class="mt-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">选择销售人员</label>
                    <select id="assign-user-id" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                        <option value="">请选择销售人员</option>
                        {% for user in sales_users %}
                        <option value="{{ user.id }}">{{ user.name }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="items-center px-4 py-3">
                <button type="button" id="cancel-assign" class="px-4 py-2 bg-gray-300 text-gray-800 text-base font-medium rounded-md w-24 mr-2 hover:bg-gray-400">
                    取消
                </button>
                <button type="button" id="confirm-assign" class="px-4 py-2 bg-primary text-white text-base font-medium rounded-md w-24 hover:bg-blue-600">
                    确定
                </button>
            </div>
        </div>
    </div>
</div>

{% block extra_js %}
{{ super() }}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 分配线索功能
    const assignModal = document.getElementById('assign-modal');
    const assignLeadName = document.getElementById('assign-lead-name');
    const assignUserId = document.getElementById('assign-user-id');
    const cancelAssignBtn = document.getElementById('cancel-assign');
    const confirmAssignBtn = document.getElementById('confirm-assign');
    let currentLeadId = null;
    
    // 为所有分配按钮添加事件监听器
    document.querySelectorAll('.assign-lead').forEach(button => {
        button.addEventListener('click', function() {
            console.log('分配按钮被点击'); // 添加调试日志
            currentLeadId = this.getAttribute('data-id');
            const leadName = this.getAttribute('data-name');
            
            console.log('线索ID:', currentLeadId, '线索名称:', leadName); // 添加调试日志
            
            assignLeadName.textContent = leadName;
            assignUserId.value = '';
            
            assignModal.classList.remove('hidden');
        });
    });
    
    cancelAssignBtn.addEventListener('click', function() {
        assignModal.classList.add('hidden');
        currentLeadId = null;
    });
    
    confirmAssignBtn.addEventListener('click', function() {
        const userId = assignUserId.value;
        if (!userId) {
            alert('请选择销售人员');
            return;
        }
        
        // 发送分配请求
        fetch(`/leads/${currentLeadId}/assign`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: `assigned_to=${userId}`
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('线索分配成功');
                window.location.href = '{{ url_for("lead.lead_pool") }}';
            } else {
                alert('分配失败: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('分配失败，请重试');
        });
    });
    
    // 点击模态框外部关闭
    assignModal.addEventListener('click', function(e) {
        if (e.target === assignModal) {
            assignModal.classList.add('hidden');
            currentLeadId = null;
        }
    });
});
</script>
{% endblock %}